<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title></title>
        <h:outputStylesheet library="css" name="stylesheet.css"/>
        <h:outputScript library="script" name="funcoes.js"/> 
        <h:outputScript library="script" name="jquery.timer.js"/> 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=pt-BR"></script>
    </h:head>

    <h:body>

        <div id="container">

            <div id="logotipo">
                <h:graphicImage url="/resources/imagens/logotipo-samu.png"/>
            </div>

            <div id="barra_menu" style="display: none; visibility: hidden">
                <ui:insert name="barra_menu">
                    <ui:include src="/restrito/menu.xhtml"/>                   
                </ui:insert>
                <div class="espacamento"/>
                <div align="right">
                    <h:panelGroup>
                        <h:outputText value="USUÁRIO: "/>
                        <h:outputText value="#{controllerPrincipal.usuarioLogado.nome.toUpperCase()}" styleClass="usuario-logado"/>
                    </h:panelGroup>
                </div>                
            </div>

            <div id="corpo">

                <h:form id="frm_global" prependId="false">

                    <p:outputPanel autoUpdate="true">
                        <h:inputHidden id="ihQtdAmb" value="#{controllerPrincipal.qtdAmbulancias}"/>
                        <h:inputHidden id="ihQtdOcor" value="#{controllerPrincipal.qtdOcorrencias}"/>
                        <h:inputHidden id="ihQtdOcorrAnt"/>
                    </p:outputPanel>

                    <h:inputHidden id="ihIndexAmb" value="#{controllerPrincipal.indiceAmbulanciaSelecionada}"/>
                    <h:inputHidden id="ihIndexOcor" value="#{controllerPrincipal.indiceOcorrenciaSelecionada}"/>   

                    <p:poll autoStart="true" 
                            interval="30" 
                            listener="#{controllerPrincipal.atualizarConteudo}" 
                            update="frm_global:tav_view_menu, maps" 
                            oncomplete="reabrirTabs();redimensionarConteudoPagPrincipal();" 
                            onstart="armazenarQtdOcorrencias('#{controllerPrincipal.qtdOcorrencias}'); redimensionarConteudoPagPrincipal();" 
                            onerror="redimensionarConteudoPagPrincipal();"/>                    

                    <p:layout id="layout" 
                              onToggle="redimensionarConteudoPagPrincipal();" 
                              onResize="redimensionarConteudoPagPrincipal();" 
                              styleClass="layout">

                        <p:layoutUnit id="layoutEsquerdo" 
                                      position="west" 
                                      size="350" 
                                      resizable="false" 
                                      closable="false" 
                                      collapsible="true" 
                                      effect="drop"
                                      effectSpeed="5"
                                      styleClass="layout-esquerdo"
                                      collapsed="true"
                                      collapseSize="23"
                                      header="Entidades No Mapa"> 

                            <p:tabView id="tav_view_menu" activeIndex="0" style="background-color: none !important">

                                <p:ajax event="tabChange" listener="#{controllerPrincipal.capturarTabSelecionada}"/>

                                <p:tab id="tab_ambulancias" title="#{msg.principal_ambulancias}">

                                    <p:scrollPanel id="spMenu" mode="native" styleClass="scroll_menu">

                                        <ui:repeat id="repeat_dados_lidos" value="#{controllerPrincipal.ultimosDadosLidos}" var="ultDadoLido" varStatus="status">

                                            <p:panel id="pnDadosLidos" collapsed="true" styleClass="painel_retratil">

                                                <f:facet name="header">

                                                    <h:panelGroup>

                                                        <p:commandLink action="#{controllerPrincipal.centralizarAmbulanciaSelecionada(ultDadoLido, status.index)}" 
                                                                       onclick="configurarIndexTabAmbSelecionada('#{status.index}'); abrirPainelAmbulancias('#{status.index}');" 
                                                                       ajax="true" 
                                                                       oncomplete="redimensionarConteudoPagPrincipal();" 
                                                                       update=":frm_global:spMaps" 
                                                                       styleClass="link_cent_amb">

                                                            <div style="width: 100%; height: 3px">

                                                                <img id="#{ultDadoLido.idMonitorado}_imgAmbMenu" src="#{controllerPrincipal.obterImagemAmbulancia(ultDadoLido)}" title="#{controllerPrincipal.obterTitleImagemAmbulancia(ultDadoLido)}"/>

                                                                <p:spacer width="3"/>

                                                                <span id="#{ultDadoLido.idMonitorado}_descHeader">
                                                                    #{ultDadoLido.descricaoMonitorado}
                                                                </span>

                                                            </div>

                                                        </p:commandLink>

                                                        <h:panelGroup style="float: right !important;">
                                                            <p:commandLink action="#{controllerVisualizarPercurso.exibirPainelVisualizarPercurso(ultDadoLido)}" update=":frm_percurso">
                                                                <h:graphicImage value="/resources/imagens/history.png" title="Visualizar Histórico"/>
                                                            </p:commandLink>
                                                            <p:spacer width="15"/>
                                                            <img id="#{ultDadoLido.idMonitorado}_imgGpsOnOff" src="#{controllerPrincipal.obterImagemGpsOnOff(ultDadoLido)}" title="#{controllerPrincipal.obterTitleGpsOnOff(ultDadoLido)}"/>
                                                            <p:spacer width="1"/>
                                                            <img id="#{ultDadoLido.idMonitorado}_imgIgnOnOff" src="#{controllerPrincipal.obterImagemIgnicaoOnOff(ultDadoLido)}" title="#{controllerPrincipal.obterTitleIgnicaoOnOff(ultDadoLido)}"/>
                                                            <p:spacer width="1"/>
                                                            <img id="#{ultDadoLido.idMonitorado}_imgIgnTipTransm" src="#{controllerPrincipal.obterImagemTipoTransmissao(ultDadoLido)}" title="#{controllerPrincipal.obterTitleTipoTransmissao(ultDadoLido)}"/>
                                                        </h:panelGroup>

                                                    </h:panelGroup>

                                                </f:facet>

                                                <h:panelGrid columns="2" cellspacing="2" cellpadding="2">

                                                    <h:outputText value="#{msg.principal_monitorado}: " styleClass="texto-negrito"/>
                                                    <span id="#{ultDadoLido.idMonitorado}_descMon">
                                                        #{ultDadoLido.descricaoMonitorado}
                                                    </span>

                                                    <h:outputText value="#{msg.principal_equipamento}: " styleClass="texto-negrito"/>
                                                    <span id="#{ultDadoLido.idMonitorado}_equipamento">
                                                        #{ultDadoLido.serialEquipamento}
                                                    </span>

                                                    <h:outputText value="#{msg.principal_data_hora}: " styleClass="texto-negrito"/>
                                                    <span id="#{ultDadoLido.idMonitorado}_dataHora">
                                                        #{ultDadoLido.horaUltimaPosicao}
                                                    </span>

                                                    <h:outputText value="Tempo Transmissão: " styleClass="texto-negrito"/>
                                                    <span id="#{ultDadoLido.idMonitorado}_tempoTransm">
                                                        #{ultDadoLido.tempoTransmissao} s
                                                    </span>

                                                    <h:outputText value="#{msg.principal_velocidade}: " styleClass="texto-negrito"/>
                                                    <span id="#{ultDadoLido.idMonitorado}_velocidade">
                                                        #{ultDadoLido.velocidade}
                                                    </span>

                                                    <h:outputText value="#{msg.principal_latitude}: " styleClass="texto-negrito"/>
                                                    <span id="#{ultDadoLido.idMonitorado}_latitude">
                                                        #{ultDadoLido.latitudeStr}
                                                    </span>

                                                    <h:outputText value="#{msg.principal_longitude}: " styleClass="texto-negrito"/>
                                                    <span id="#{ultDadoLido.idMonitorado}_longitude">
                                                        #{ultDadoLido.longitudeStr}
                                                    </span>

                                                    <h:outputText value="#{msg.principal_status}: " styleClass="texto-negrito"/>
                                                    <span id="#{ultDadoLido.idMonitorado}_status">
                                                        #{controllerPrincipal.obterTitleImagemAmbulancia(ultDadoLido)}
                                                    </span>

                                                </h:panelGrid>  

                                            </p:panel>                                    

                                        </ui:repeat> 

                                    </p:scrollPanel>

                                </p:tab>

                                <p:tab title="#{msg.principal_ocorrencias}">
                                    <p:scrollPanel id="spOcorrencias" mode="native" styleClass="scroll_menu">
                                        <ui:repeat id="repeat_ocorrencias" value="#{controllerPrincipal.ocorrencias}" var="ocorrencia" varStatus="status">

                                            <p:panel id="pn_ocorrencias" collapsed="true" styleClass="painel_retratil" >

                                                <f:facet name="header">
                                                    <h:graphicImage value="#{controllerPrincipal.obterImagemAlerta(ocorrencia)}"/>
                                                    <p:spacer width="5"/>
                                                    <p:commandLink value="N.º: #{ocorrencia.numeroOcorrencia} - #{ocorrencia.descricaoMonitorado}" action="#{controllerPrincipal.centralizarOcorrenciaSelecionada(ocorrencia, status.index)}" onclick="configurarIndexTabOcorSelecionada('#{status.index}'); abrirPainelOcorrencias('#{status.index}');" update="#{(ocorrencia.latitude ne null and ocorrencia.longitude ne null) ? ':frm_global:spMaps' : ''}" oncomplete="redimensionarConteudoPagPrincipal();" styleClass="link_cent_amb"/>
                                                    <p:commandLink action="#{controllerPrincipal.montarRota(ocorrencia)}" style="float: right !important; margin-right: 5px;" title="Visualizar Rota" rendered="#{controllerPrincipal.ocorrenciasAdicionadasMapa.contains(ocorrencia)}">
                                                        <h:graphicImage value="/resources/imagens/rota.png"/>
                                                    </p:commandLink>
                                                    <p:commandLink id="btRemoverOcorrencia" action="#{controllerPrincipal.removerOcorrenciaSelecionada(ocorrencia, status.index)}" update=":frm_global:spMaps, :frm_global:tav_view_menu:spOcorrencias" style="float: right !important; margin-right: 5px;" rendered="#{controllerPrincipal.ocorrenciasAdicionadasMapa.contains(ocorrencia)}" oncomplete="abrirPainelOcorrencias(#{controllerPrincipal.indiceSelecionado});">
                                                        <h:graphicImage value="/resources/imagens/globe_delete.png" title="Remover Ocorrência do Mapa"/>
                                                    </p:commandLink>                                                    
                                                    <p:commandLink id="btVisualizarOcorrencia" action="#{controllerPrincipal.visualizarOcorrenciaNoMapa(ocorrencia, status.index)}" update=":frm_pesquisa_enderecos" style="float: right !important; margin-right: 5px;" rendered="#{!controllerPrincipal.ocorrenciasAdicionadasMapa.contains(ocorrencia)}">
                                                        <h:graphicImage value="/resources/imagens/globe.png" title="Visualizar Ocorrência No Mapa"/>
                                                    </p:commandLink>
                                                </f:facet>                                                

                                                <h:panelGrid columns="2" cellspacing="2" cellpadding="2">

                                                    <h:outputText value="N.º Ocorrencia: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_numero">
                                                        #{ocorrencia.numeroOcorrencia}
                                                    </span>

                                                    <h:outputText value="Data/Hora: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_dataHora">
                                                        #{ocorrencia.dataCriacaoStr}
                                                    </span>

                                                    <h:outputText value="Tipo Atendimento: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_tipoAtend">
                                                        #{ocorrencia.descricaoTipoAtendimento.toUpperCase()}
                                                    </span>

                                                    <h:outputText value="Motivo: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_motivo">
                                                        #{ocorrencia.motivo}
                                                    </span>

                                                    <h:outputText value="Paciente: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_paciente">
                                                        #{ocorrencia.paciente.toUpperCase()}
                                                    </span>

                                                    <h:outputText value="Sexo: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_sexo">
                                                        #{ocorrencia.sexo.toUpperCase()}
                                                    </span>

                                                    <h:outputText value="Logradouro: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_logradouro">
                                                        #{ocorrencia.logradouro.toUpperCase()}
                                                    </span>

                                                    <h:outputText value="Número: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_numeroLog">
                                                        #{ocorrencia.numeroLogradouro}
                                                    </span>

                                                    <h:outputText value="Bairro: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_bairro">
                                                        #{ocorrencia.bairro.toUpperCase()}
                                                    </span>

                                                    <h:outputText value="Tel. Solicitante: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_tel">
                                                        #{ocorrencia.telefoneSolicitante}
                                                    </span>

                                                    <h:outputText value="Logr. Ref: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_logRef">
                                                        #{ocorrencia.logradouroReferencia.toUpperCase()}
                                                    </span>

                                                    <h:outputText value="Cidade: " styleClass="texto-negrito"/>
                                                    <span id="#{ocorrencia.idOcorrencia}_cidade">
                                                        #{ocorrencia.cidade.toUpperCase()}
                                                    </span>

                                                </h:panelGrid>

                                            </p:panel>
                                        </ui:repeat>
                                    </p:scrollPanel>
                                </p:tab>

                                <p:tab title="#{msg.principal_pontos_interesse}">

                                    <p:scrollPanel id="spPontosInteresse" mode="native" styleClass="scroll_menu">
                                        <ui:repeat id="repeat_pontos_interesse" value="#{controllerPrincipal.pontosInteresse}" var="pontoInteresse" varStatus="status">
                                            <h:panelGrid columns="2">
                                                <h:graphicImage value="/resources/imagens/marcador_16x16.png"/>
                                                <p:commandLink value="#{pontoInteresse.descricao.toUpperCase()}" action="#{controllerPrincipal.centralizarPontoInteresseSelecionado(pontoInteresse)}" ajax="true" oncomplete="redimensionarConteudoPagPrincipal();" update=":frm_global:spMaps"/>
                                            </h:panelGrid>
                                        </ui:repeat>
                                    </p:scrollPanel>

                                </p:tab>

                            </p:tabView>

                        </p:layoutUnit> 

                        <p:layoutUnit id="layoutCentro" 
                                      position="center" 
                                      resizable="false"
                                      styleClass="layout-centro">

                            <p:scrollPanel id="spMaps" mode="native" styleClass="scrollpanel-maps">

                                <p:gmap id="maps" 
                                        center="#{controllerPrincipal.maiorLatLong}" 
                                        zoom="#{controllerPrincipal.zoom}" 
                                        type="ROADMAP"
                                        styleClass="maps"
                                        model="#{controllerPrincipal.mapModel}"
                                        widgetVar="gmaps">

                                    <p:ajax event="stateChange" listener="#{controllerPrincipal.onStateChange}"/>  
                                    <p:ajax id="evento_selecao" event="overlaySelect" listener="#{controllerPrincipal.selecionarMarcador}"/>

                                    <p:gmapInfoWindow id="infoWindow" maxWidth="90"> 

                                        <p:outputPanel autoUpdate="true">

                                            <h:panelGrid columns="1" rendered="#{controllerPrincipal.informacaoSelecionada.tipoInformacao eq 'PONTO_INTERESSE'}">
                                                <h:outputText value="#{controllerPrincipal.informacaoSelecionada.mapaInformacao['descricao']}" style="font-weight: bold"/>
                                            </h:panelGrid>

                                            <h:panelGrid columns="1" rendered="#{controllerPrincipal.informacaoSelecionada.tipoInformacao eq 'ULTIMO_DADO_LIDO'}">
                                                <h:outputText value="#{controllerPrincipal.informacaoSelecionada.mapaInformacao['descricaoMonitorado']}" style="font-weight: bold"/>
                                                <h:outputText value="#{controllerPrincipal.informacaoSelecionada.mapaInformacao['horaUltimaPosicao']}">
                                                    <f:convertDateTime pattern="#{msg.formatoPadraoDataHoraSeg}" locale="#{msg.localeBrasil}" timeZone="#{msg.timezoneBrasil}"/>
                                                </h:outputText>
                                                <h:outputText value="#{controllerPrincipal.informacaoSelecionada.mapaInformacao['velocidade']} Km/H"/>
                                                <h:outputText value="#{msg.principal_lat} #{controllerPrincipal.informacaoSelecionada.mapaInformacao['latitude']}"/>
                                                <h:outputText value="#{msg.principal_long} #{controllerPrincipal.informacaoSelecionada.mapaInformacao['longitude']}"/>
                                            </h:panelGrid>

                                            <h:panelGrid columns="2" cellspacing="2" cellpadding="2" rendered="#{controllerPrincipal.informacaoSelecionada.tipoInformacao eq 'OCORRENCIA'}">

                                                <h:outputText value="N.º Ocorrência: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['numeroOcorrencia']}
                                                </span>

                                                <h:outputText value="Data/Hora: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['dataCriacao']}
                                                </span>

                                                <h:outputText value="Tipo Atendimento: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['descricaoTipoAtendimento']}
                                                </span>

                                                <h:outputText value="Motivo: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['motivo']}
                                                </span>

                                                <h:outputText value="Paciente: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['paciente']}
                                                </span>

                                                <h:outputText value="Sexo: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['sexo']}
                                                </span>

                                                <h:outputText value="Logradouro: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['logradouro']}
                                                </span>

                                                <h:outputText value="Número: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['numeroLogradouro']}
                                                </span>

                                                <h:outputText value="Bairro: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['bairro']}
                                                </span>

                                                <h:outputText value="Tel. Solicitante: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['telefoneSolicitante']}
                                                </span>

                                                <h:outputText value="Logr. Ref: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['logradouroReferencia']}
                                                </span>

                                                <h:outputText value="Cidade: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['cidade']}
                                                </span>

                                                <h:outputText value="Lat: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['latitude']}
                                                </span>

                                                <h:outputText value="Long: " styleClass="texto-negrito"/>
                                                <span>
                                                    #{controllerPrincipal.informacaoSelecionada.mapaInformacao['longitude']}
                                                </span>

                                            </h:panelGrid>

                                        </p:outputPanel>

                                    </p:gmapInfoWindow>                                      

                                </p:gmap>

                            </p:scrollPanel>                        

                        </p:layoutUnit> 

                    </p:layout>


                    <div align="center">
                        <p:commandButton value="Tela Cheia"
                                         action="#{controllerFullScreen.inicializar}"
                                         ajax="false"/>
                    </div>

                </h:form>

                <ui:include src="/restrito/dialog_buscar_enderecos.xhtml"/>
                <ui:include src="/restrito/dialog_visualizar_mapa.xhtml"/>
                <ui:include src="/restrito/dialog_visualizar_rota.xhtml"/>
                <ui:include src="/restrito/dialog_visualizar_percurso.xhtml"/>
                <ui:include src="/restrito/dialog_status.xhtml"/>

            </div>

            <div id="rodape" align="center">
                <ui:insert name="rodape">
                    <ui:include src="/rodape.xhtml" />
                </ui:insert>
            </div>	                    

        </div>

        <script type="text/javascript">
            //<![CDATA[
            function redimensionar(id, diff) {
                var t = document.getElementById(id);
                var height = document.body.clientHeight;
                t.style.height = ((height - diff) + "px");
            }
            
            function redimensionarConteudoPagPrincipal() {
                redimensionar('layoutEsquerdo', 180);
                redimensionar('spMaps', 180);
                redimensionar('maps', 180);
                redimensionar('tav_view_menu:spMenu', 265);
                redimensionar('tav_view_menu:spOcorrencias', 265);
                redimensionar('tav_view_menu:spPontosInteresse', 265);
            }

            window.onload = function() {
                redimensionarConteudoPagPrincipal();
            }
            
            window.onresize = function() {
                redimensionarConteudoPagPrincipal();
            }

            jQuery(this).keypress(function(event) {
                closeOnEscape(event);
            });            
            
            //]]>
        </script>

    </h:body>

</html>

